<template>
  <div v-loading.fullscreen.lock="loading"
       class="quote-box">
    <div class="quote-content">
      <details-head v-model="pageType"
                    :title="'运单费用'"
                    :multiple="true"
                    :show-print="true"
                    :print-router="printPath"
                    :print-query="{
                      waybillId: waybillId,
                      status: wayBillInfo.status
                    }"
                    :custom-list="btnGroup"
                    :close-label="`关闭`"
                    :loading="loading" />
      <div class="pad20">
        <el-row :gutter="40"
                class="des-wrap">
          <el-col class="wrap-left"
                  :span="8">
            <div class="text-center f18">
              <b v-if="wayBillInfo.fromAddress">
                {{ wayBillInfo.fromAddress.city === '市辖区' ?  wayBillInfo.fromAddress.province : wayBillInfo.fromAddress.city }}
              </b>
              <icon-svg class="font-style"
                        class-name="iconClass"
                        icon-name="jiantou" />
              <b v-if="wayBillInfo.toAddress">
                {{ wayBillInfo.toAddress.city === '市辖区' ? wayBillInfo.toAddress.province : wayBillInfo.toAddress.city }}
              </b>
            </div>
            <quote-list :info="quoteData"
                        :config-data="configData"
                        :icon-name="iconName"
                        :content="content" />
          </el-col>
          <el-col :span="16">
            <el-row class="mb20">
              <el-col :span="12">
                <descriptions v-if="wayBillInfo.customer"
                              :info="
                    Object.assign(
                      {},
                      wayBillInfo.customer,
                      wayBillInfo.fromAddress,
                      wayBillInfo.fromContact
                    )
                  "
                              type="sender"
                              :is-quote="true"
                              :from-time="wayBillInfo.fromTime"
                              :company="wayBillInfo.customer.showCustomerName" />
              </el-col>
              <el-col :span="12">
                <descriptions v-if="wayBillInfo.consignee"
                              :info="
                    Object.assign(
                      {},
                      wayBillInfo.consignee,
                      wayBillInfo.toAddress,
                      wayBillInfo.toContact
                    )
                  "
                              type="consign"
                              :is-quote="true"
                              :to-time="wayBillInfo.toTime"
                              :company="wayBillInfo.consignee.consigneeName" />
              </el-col>
              <icon-svg v-if="wayBillInfo.waybillPrice && wayBillInfo.waybillPrice.matched && !wayBillInfo.waybillPrice.refresh"
                        class-name="stampSty"
                        icon-name="a-ziyuan4" />
              <icon-svg v-if="wayBillInfo.waybillPrice && wayBillInfo.waybillPrice.refresh"
                        class-name="stampSty"
                        icon-name="a-ziyuan3" />
            </el-row>
            <total-list class="mb20"
                        base
                        :info="
                Object.assign(
                  {},
                  wayBillInfo.waybillCache,
                  wayBillInfo.transportRequirement
                )
              "
                        :config-data="totalData" />
            <simple-list :info="
                Object.assign(wayBillInfo.transportRequirement || {}, {
                  orderDesc: wayBillInfo.desc,
                  calculateValue: waybillCache.calculateValue ? thousandDigit(waybillCache.calculateValue, 2) :0
                })
              "
                         :config-data="transportQuoteInfoArr" />
          </el-col>
        </el-row>
      </div>
      <layer title="费用信息">
        <TransportQuote v-if="wayBillColumn.length"
                        ref="transportQuote"
                        disabled
                        :quotation-column.sync="wayBillColumn"
                        :data-list="priceList"
                        :waybill-quote-bargain="false"
                        :match-id="matchId"
                        :match-column="wayBillColumn"
                        :match-data="waybillMatchData"
                        :surcharge-fees="surchargeFees" />
        <SurchargeFee :data-list="surchargeFees" />
        <div class="total-label">
          已{{paymentLabel}}款: <b class="c-primary">{{ processedFee }}</b>
          <el-tooltip placement="top"
                      effect="light">
            <div slot="content">已{{paymentLabel}}款：<br />
              初始为0.00元，财务将运单的（预付款、货到付款、代收货款、回执付款）进行{{paymentLabel}}款操作，已{{paymentLabel}}款将增加相应的金额</div>
            <icon-svg class-name="iconClass ml12"
                      icon-name="bangzhuzhongxin1" />
          </el-tooltip>
          <span class="ml100"></span>
          未{{paymentLabel}}款: <b class="c-primary">{{ pendingFee }}</b>
          <el-tooltip placement="top"
                      effect="light">
            <div slot="content">未{{paymentLabel}}款: <br />
              初始为已审核同意的运单费用，该费用从财务角度分为预付款、货到付款、代收货款、回执付款，财务将这四种款项进行{{paymentLabel}}款操作，未{{paymentLabel}}款将减去相应的金额</div>
            <icon-svg class-name="iconClass ml12"
                      icon-name="bangzhuzhongxin1" />
          </el-tooltip>
        </div>
        <pay-type ref="payType"
                  disabled
                  :data-list="payList" />
        <p class="remark wrap">报价备注：{{ remarks }}</p>
      </layer>
      <layer title="其他信息">
        <el-row class="mb10">
          <el-col :span="2"> 备注 </el-col>
          <el-col class="wrap"
                  :span="22"> {{ wayBillInfo.desc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="2"> 附件 </el-col>
          <el-col :span="22">
            <upload-file-selector v-if="photo.length > 0"
                                  :is-onload="true"
                                  :is-create="true"
                                  :is-cover="true"
                                  :is-disabled="true"
                                  :attach-form.sync="photo" />
          </el-col>
        </el-row>
      </layer>
    </div>
  </div>
</template>
<script src="./quoteFreightDetail.js"></script>
<style lang="scss" scoped>
/deep/ .el-input.is-disabled .el-input__inner {
  color: var(--prev-color-text-primary);
}
.quote-box {
  width: 100%;
  height: calc(100vh);
  overflow-x: hidden;
  overflow-y: scroll;
}
.quote-content {
  width: 1200px;
  margin: 0 auto;
  background: var(--prev-bg-white);
}
.pad20 {
  padding: 20px;
}
.wrap {
  word-break: break-all;
}
.des-wrap {
  overflow: hidden;
  .wrap-left {
    position: relative;
    &:after {
      content: "";
      width: 1px;
      height: 2000px;
      background: #ebebeb;
      position: absolute;
      right: 10px;
      top: 0;
    }
  }
}
.font-style {
  font-size: 36px;
  margin: 0 10px;
  position: relative;
  top: 5px;
}
.cost-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  font-size: 16px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
  .el-button {
    font-size: 16px;
  }
}
.cost-title-1 {
  margin: 20px 0;
  font-size: 16px;
  span {
    color: var(--prev-border-color-grey);
    font-size: 12px;
  }
}
.totalSty {
  color: var(--prev-color-primary) !important;
}
.total-label {
  color: var(--prev-color-text-ashes);
  height: 40px;
  line-height: 40px;
  padding: 20px;
}
.ml12 {
  margin-left: 12px;
}
.ml100 {
  margin-left: 100px;
}
.fontSty1 {
  color: var(--prev-color-text-ashes);
  display: flex;
  justify-content: flex-end;
  height: 40px;
  line-height: 40px;
}
.fontSty2 {
  color: var(--prev-color-primary);
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}
.remark {
  background: #fafafa;
  padding: 15px;
}
.stampSty {
  width: 126px;
  height: 126px;
  position: absolute;
  left: 80%;
}
.iconSty {
  margin: 14px 10px;
}
</style>
